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Planning the Site 


When faced with the daunting task of building or restructuring a Web site, many 
designers simply do not know where to begin. Rather than rushing straight to 
the computer, the best way to start is by picking up a pencil and paper and 
sketching out your site design. This chapter walks you through the planning 
process, allowing you to set a framework for development, resulting in less 


recoding when you actually sit down at the computer. 
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CREATE A SITE SPECIFICATION 


Determine what your objectives are for building a Web site. You may want to 
increase communication among employees, gain visibility, provide a service, 
attract new customers, or simply show the world you can code HTML. Properly 
maintained Web sites take a lot of work. Make sure you have a valid justifica- 
tion for building your site, other than just to say that you have a Web site. 

Start your planning by creating a site specification, which is the design 
document for your site. If you followed the exercises at the end of Chapter 1, 
you created a basic draft of a project proposal. You can use some of that infor- 
mation in your site specification. After you read this chapter, you will be able 
to answer a number of additional questions about your site. You can return to 
the site specification as you build your site to help maintain your focus.Answer 
the following questions in your site specification: 


e Why are you building the Web site? Can you write a two or three-paragraph 
mission statement that briefly states the site’s goals? 

e What do you envision as the goal of the site? What do you or your company 
or organization hope to gain from creating and maintaining a Web site? 

e How will you judge the success of the site? What are the measuring fac- 
tors you can use to assess the effectiveness of the site? 

e Who is the target audience? What characteristics do they share? How will 
you find out more about them? 

e What are the limiting technical factors affecting your site? 


IDENTIFY THE CONTENT GOAL 


Examine closely what type of site you are building. Your objectives and your 
users’ objectives—what you want the Web site to accomplish and what your 
users want from your site—may differ. For example, site designers often are more 
concerned with the visual aspects of a Web site, such as the quality of the graph- 
ics and the use of animation. Your users probably care more about how quickly 
they can find information.Adopt your user’s perspective.Think about the type of 
content you are presenting and look to the Web for examples of how best to pre- 
sent it.The following types of Web sites demonstrate ways to focus your content. 


e Billboard — These sites establish a Web presence for a business or com- 
mercial venture. In many cases they are informational and offer no true 
Web-based content, acting as an online brochure rather than offering 
Web-based interaction. Many businesses build this type of site first, then 
slowly add functions such as online ordering and product demonstra- 
tions as they become more comfortable with the medium. 

e Publishing — Most major newspapers and periodicals now boast an 
online counterpart. These are some of the most ambitious sites on the 
Web in the breadth and depth of content they contain. Sites of this type 
usually contain multiple levels of information with many page templates. 
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Many publishing sites use special software that enables them to publish 
Web pages by drawing the content from the same databases as the 
paper-based versions. This allows their authors to write the article once, 
but have it published to multiple destinations, such as the daily newspa- 
per and the Web site. 

Special interest, public interest, and nonprofit organization — These sites 
include news and current information for volunteers, devotees, novices, a 
specific audience, or the general public. No matter what your special 
interest, there is a Web site devoted to it. Public service Web sites contain 
links, information, downloadable files, addresses, and telephone numbers 
that can help you solve a problem or find more leads. Nonprofit organiza- 
tions can state their manifesto, seek volunteers, and foster a grass-roots 
virtual community. 

Virtual gallery — The Web is a great place to show off samples of all 
types of art and design. Photographers and artists can display samples of 
their work. Musicians can post audio files of their songs. Writers can offer 
sections of text or complete manuscripts. Keep in mind that any copy- 
righted material you display on a Web site can be downloaded to a user’s 
machine without your permission. Software companies such as Digimarc 
(www.digimarc.com) offer digital watermarking technology that lets 
artists embed digital copyright information in their electronic files as a 
deterrent to piracy of proprietary content.This information cannot be seen 
or altered by the user. 

E-commerce, catalog, and online shopping — The Web has become a viable 
shopping medium that will continue to expand as more users improve their 
Internet access and learn to trust the security of online commerce. Web 
commerce already has begun to make inroads on traditional retailing, and it 
offers many advantages over mail-order shopping, such as letting the cus- 
tomer know immediately if an item is in stock. Other types of commerce on 
the Web include stock trading, airline ticketing, and auctions. Many software 
vendors offer turnkey systems that can integrate with existing databases to 
speed the development of a commerce site.A good e-commerce site pro- 
vides users with quick access to the item they want, detailed product 
descriptions, and easy, secure ordering. 

Product support — The Web is a boon to consumers who need help 
with a product. Manufacturers can disseminate information, upgrades, 
troubleshooting advice, documentation, and online tutorials on their Web 
site. Companies that provide product help information on the Web often 
find that their customer support calls decrease. Software companies 
especially benefit from the Web. Users can download patches, upgrades, 
and use trial versions of software before they buy. 

Intranet and extranet — An intranet is a private computer network con- 
tained within an organization. An intranet works like the Internet, and 
many companies build Web sites that are accessible only to those who 
have access to their intranet. Additionally, many companies have telecom- 
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muting employees who need access to company policies, documentation, 
parts lists, pricing information, and other materials. These employees can 
be reached via an extranet, which is a part of the private intranet 
extended outside the organization using the Internet. Many organizations 
mandate a particular browser for employee use, making the Web 
designer’s job a little bit easier, because they only have to code and test 
for one browser. 


One type of trial software is shareware, programs that users download 
and use for a trial period. Users then can register the software for a relatively 
small fee compared to commercially produced software. Shareware usually is 
developed by individuals or very small software companies, so registering the 
software is important to support future development efforts. Some of the 
most popular and commonly used programs are shareware, such as WinZip, 
from Nico Mak Computing, Info. at www.winzip.com.WinZip lets you work 
with .ZIP archive files, which is the PC defacto standard for file compression 
and archiving. If you are sending or receiving files via email, you will need 
WinZip to compress and uncompress them. If you have a Macintosh, you can 
use Stuffit to compress your files. Stuffit Deluxe and Stuffit Lite, created by 
Aladdin Systems, Inc., are available in shareware versions at wiww.aladdinsys.com. 
If you are a PC user and someone sends you a Stuffit file, you can expand it with 
Aladdin’s Expander program, which also is available freely at the Aladdin site. 
Shareware programs are readily available for you to try and buy, including all 
types of software that can help you with your Web site development.Two great 
shareware sites that have WinZip as well as hundreds of other programs are: 
Shareware.com (wwiwshareware.com) and The Ultimate Collection of Winsock 
Software (www.tucows.com). 


ANALYZE YOUR AUDIENCE 


If at all possible, analyze your audience and produce an audience definition, 
a profile of your average user. Contact your typical users or those who work 
with them and answer the following questions: 


e What is it that users want when they come to your site? 

e How can you attract them and entice them to return for repeat visits? 

e What type of computer and connection speed does your typical 
visitor have? 


Answering these questions is especially difficult when your medium is the 
Web. Your users may fit no common profile. There are other ways to gather 
information about them. One way is to create an online survey as part of your 
site. If possible, offer an incentive for filling out the survey, such as a product 
giveaway, T-shirt, or imprinted mouse pad. Figures 3-1 and 3-2 show a portion of 
an online survey from the Millipore Corporation. 
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FIGURE 3-1 3 Internet Survey - Netscape 
Online survey part 1 


[ire con/corperete/millram net/suveySS06037operfomtsouce=homepene E] C3 
Are you ready for e-commerce? 


Thanks for taking the time to answer our annual e-commece survey. Suggestions and questions from our 
on-line community have made a signficant difference in our site — telling us what we should have more of 
and what we should have less of. 


This is a relatively quick survey with 16 pull-down boxes and one comment box. If you are among the first 
500 people who respond to this survey we will send you a Millipore cap — adjustable, great for the summer. 


Please note this incentive is for our external community only, Millipore employees and agencies have to go 
to the company store! 


Thanks for your help and comments. 


1. What types of products do you use for your work? 
Analytical laboratory products (filters; devices; water systems; etc) 


2. Have you ever purchased anything on-line for your work? 
Yes | 


3. If you have purchased on-line for your work, what type of organization have you purchased from? 


[Directly from manufacturer z| 


FIGURE 3-2 
Online survey part 2 


4. Are you currently a Millipore customer? 
No 


5. Are you an end user of Millipore products or a purchasing agent for your organization? 


Purchasing Agent | 


6f you are a Millipore customer, how often do you order Millipore products? 
[Not a customer | 


7. Do you want to be able to check Millipore product availability online? 
Yes 


8. Do you want to order Millipore products online? 
Yes | 


9. Where would you prefer to order Millipore products online? 


[Directly from Millipore web site E| 


10. How would you prefer to authorize payment online? 


[Purchase order z] 


The questions survey Millipore’s customers on whether they would pur- 
chase products online, and Millipore provides an incentive to fill out the 
form—they will send a baseball cap to the first 500 respondents. This is well 
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worth Millipore’s investment if they get quality information from the survey 
results. 

If you cannot survey your users, or if you feel you are not getting good sur- 
vey results, adopt the user’s perspective as you define your audience. Here are 
some questions to consider: 


e Who are the typical members of your audience? Are they male or female? 
What level of education do they have? What is their reading and vocabu- 
lary level? What level of technical aptitude do they have? 

e Why do people come to your site? Do they want information? Do they 
want to download files? Are they looking for links to other Web sites? 

e Do you have a captive audience, such as a base of loyal customers that 
want up-to-date information? Are you designing for an intranet, where 
users are employees of an organization? 

e Will other sites link to your site; or will your site provide links? If users 
unfamiliar with the site visit, will they know what you offer? 

e How often will users return to your site? Do they have a reason to 
come back? 

e What computing platform do your users have? What is their typical connec- 
tion speed? What type of browser do they use? If you are on an intranet, is 
there a standard for browsers, connection, and screen resolution? 

e Whose skills do you need to build the site? Who will create the graphics, 
code the pages, and write the text? Do you have the talent and economic 
resources that you need? Do they meet the expectations of your users? 


Refine your content and presentation even after your site is built and running. 
Continue soliciting user feedback to keep your site focused and the content fresh. 


IDENTIFY TECHNOLOGY ISSUES AND CONSTRAINTS 

Make your best effort to identify any limiting or universal technological factors that 
are particular to your audience. For example, if the audience is anybody, the ubiq- 
uitous Web surfer, then you may have to design for the lowest common denomina- 
tor, using less graphics and considering 640 x 480 as the base screen resolution. If 
you primarily have a high tech audience, a higher resolution or connection speed 
may apply. If you are designing an intranet site, you may have the luxury of know- 
ing your users’ exact operating systems and browser versions. Whatever the partic- 
ulars, make sure to design at the correct level, or you will risk losing visitors. 


BUILD A WEB SITE DEVELOPMENT TEAM 


Although one person can maintain small Web sites, larger sites require a group 
of personnel filling a variety of roles.The line can be blurred between the roles, 
and of course, many aspects of site design require more than one head to solve 
a problem.The following roles are examples of the types of talent necessary to 
build a larger, well-conceived site. 


e Server administrators — Get to know and appreciate the technical people 
that run your Web server. They take care of the sticky technical issues like 
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firewalls, modem ports, internal security, file administration, and back-up 
procedures. Consult with them to determine your Web site’s default file- 
name and directory structure.They also can generate reports that will tell 
you how many visitors your site is attracting, where the visitors are coming 
from, and what pages they like best. 

e HTML coders — These are the people responsible for creating the HTML 
code and troubleshooting the site. Most HTML coders now are using 
HTML editors to create code, but any self-respecting HTML coder knows 
how to open the HTML file in a text editor and code by hand.The coders 
also are responsible for testing and evaluating the site across different 
operating systems and Web browsers. 

e Designers — Designers are the graphic artists responsible for the look of 
the site. They will use design software, such as Adobe PhotoShop, the 
industry standard graphic design program. Designers contribute to the 
page template design, navigation icons, color scheme, and logos. If your 
site uses photographic content, the designers will be called upon to pre- 
pare the photos for online display. 

e Writers and Information designers — Writers prepare content for online dis- 
play, which includes designing hypertext information and navigation paths. 
Additionally, writers should be responsible for creating a site style guide and 
typographic conventions. The writers are responsible for consistency, 
grammar, spelling, and tone. They also work closely with the designers to 
develop the page templates. 

e Software programmers — Programmers write the programs you need to 
build interaction into your site. They may write a variety of applications, 
including Common Gateway Interface (CGI) scripts, Java scripts, and 
back-end applications that interact with a database. Commerce sites will 
especially need the talents of a programming staff. 

e Database administrators — The people who are responsible for maintain- 
ing the databases play an important role in commercial Web sites. They 
make sure that your data is accessible and safe. 

e Marketing — The marketing department can generate content and pro- 
vide exposure for the site. 


FILENAMES AND URLS 


Before you set your hands on the keyboard and mouse, plan your filenaming 
conventions for your site. Talk to your system administrator and find out what 
type of operating system your Web server uses.Typically you will develop your 
Web site locally on a PC or Macintosh, and then upload the files to the Web 
server as the last step in the publishing process. If the Web server runs an oper- 
ating system different from your local development system, transferring your 
files to the server may break local URL links because of either filename or direc- 
tory structure inconsistencies. 
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TABLE 3-1 


File naming 
conventions 


FILE NAMING 

The maximum length of the filename, valid characters and punctuation, and 
sensitivity to uppercase and lowercase letters all vary among operating systems 
as described in Table 3-1. 


Operating System File Naming Conventions 


ISO 9660 standard The filename consists of a maximum of eight letters fol- 
lowed by a period and a three-letter extension. Allowed 
characters are letters, numbers, and the underscore (_). 


DOS and Windows 3.x The same as ISO 9660 but with these additional characters 

(FAT file system) allowed: $ %'*-@*!&[]()# 

Microsoft Windows/NT, Maximum 255 letters, all characters allowed except: 

NTFS, and Windows 95 VFAT, Wer ssl 

Windows 98 FAT32 

Macintosh Maximum 31 letters, all characters allowed except the 
colon (:) 

UNIX Maximum 255 letters, all characters allowed except the 


forward slash (/) and spaces 


Case Sensitivity 

If you have an image file named Picture.gif, for example, and you reference that 
file as <IMG SRC=“picture.gif”>, the image will display properly on a Macintosh 
or Windows machine. On a UNIX server, however, the image will not load prop- 
erly because UNIX is case-sensitive.To a UNIX machine, Picture.gif and picture.gif 
are two different files. It is best always to use lowercase letters for all filenames. 
Remember to use lowercase letters in filenames in your HTML code as well. 


Character Exceptions 

Character use also is incompatible between operating systems. For example, 
the filename my stuffbtm is valid on a PC or Macintosh, but not on a UNIX 
machine because of the space in the filename. If you transfer a Web site con- 
taining my stuffbtm to a UNIX server, the links to the file will not work. As 
another example, the filename <section2>.htm is valid on a Macintosh or UNIX 
machine, but if you transfer the files to a Windows NT server the <> characters 
are not allowed. It is best when naming your files to leave out special charac- 
ters such as /,\, &, *, and blank spaces. 


File Extensions 

Use the correct file extensions to identify your file to the browser. HTML text 
files must end in .htm or .html. Be careful to add this extension when you are 
working in Notepad, which defaults to saving as .txt. You also must correctly 
specify image file formats in the file extensions. Joint Photographic Experts 


TIP 


When you are brows- 
ing the Web, you do 
not need to enter the 
protocol because the 
browser defaults to 
http://. However, in 
your code you must 
always include the 
protocol with a com- 
plete URL, otherwise 
the browser will not 
know how to connect 
to the location you 


specify. 


FIGURE 3-3 
Parts of a complete URL 
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Group JPEG) files must end in jpg or .jpeg. Graphics Interchange Format (GIF) 
files must end in .gif. Portable Network Graphic (PNG) files must end in .png. 


Solving the Filename Dilemma 

The best way to overcome the restrictions of case sensitivity, character excep- 
tions, and file extensions is to use the convention specified by the International 
Standards Organization (ISO) for all your files. This convention (often called 
eight-dot-three) specifies a maximum of eight letters followed by a period and 
a three-letter extension. Allowed characters are letters, numbers, and the under- 
score character. Thus a filename in 8.3 means an eight-letter filename with a 
three-letter file extension. Here are some examples: 


e mypage.htm 
e chap_1l.htm 

e  picturel jpg 
e logo.gif 


If you use the 8.3 file naming convention on your development system, you 
will have little or no filename problems when you transfer your files to the Web 
server, regardless of the server’s operating system. By sticking with this filename 
format, you ensure that your files will be portable across the greatest number of 
operating systems. Do not forget to use lowercase characters, and omit special 
characters from your filenames to ensure compatibility. 


The Default Main Page Name 

Every Web site has a default main page that displays when the browser requests 
the directory of the site rather than a specific file. This is indicated by a trailing 
slash in the URL, such as bttp.//jwww.mysite.com/. In this instance the Web 
server provides the index file, which usually is named index.htm. Windows NT, 
however, defaults to an index filename of default.htm, and other servers may be 
set to other names such as main.htm or home.htm. Before you start coding, 
check with your system administrator to verify the main page filename. 


URL USAGE 

Although you may know that URLs are the addresses you type into your 
browser to access a site, you may not realize that there are two types of URLs: 
complete and partial. 


Complete URLs 

A Uniform Resource Locator (URL) is the unique address of a file’s location on 
the World Wide Web.A complete URL includes the protocol the browser uses to 
access the file, server or domain name, the relative path, and the filename. 
Figure 3-3 shows an example of a complete URL. 


/business /trends/ laptop.htm"> 


<A HREF="http://www.mysite.co 


Protocol Domain name 
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In this example, bttp is the protocol, and wwiwmysite.com is the domain name. 
The path shows that the destination file, Japtop.btm, resides in the business/ trends 
folder. Use complete URLs in your HTML code when linking to another server. Use 
partial URLs when you link to files within your own site. 


Partial URLs 

Use a partial URL when you are linking to a file that resides on your own com- 
puter. Partial URLs omit the protocol and domain or server name, and specify 
the path to the file relative to one another on the same server. Files that reside 
in the same directory need no path information other than the filename. The 
following code shows an example of a partial URL. 


<A HREF="laptop.htm”>link text</A> 


DIRECTORY STRUCTURE 


FIGURE 3-4 


Typical Web server 
directory structure 


When you complete your site, you will publish your files on the Web by trans- 
ferring them to a Web server.A typical Web server has a user area that contains 
folders for each user. Your files are stored in your user area, along with other files 
from other Web sites stored in their respective user areas. The directory struc- 
ture of the Web server affects the format of your site’s URL. 

Figure 3-4 shows a typical Web server directory structure. If you do not buy 
a domain name for your site, you will have a URL that reflects your path in the 
public area of the Web server.A user enters the following address in the browser 
to access User 2’s Web site: www.Webserver.com/user2/. 


Web server www.webserver.com 


public area 


Useri | www.webserver.com/user1/ 


User2 | www.webserver.com/user2/ 
www.webserver.com/user3/ 
= User3 


When you buy a domain name, the name you choose is an alias that points 
to your actual location on the Web server, as shown in Figure 3-5. User 2 has pur- 
chased www. mysite.com for a domain name.The actual path to User 2’s content 
has not changed, but the visitor to the site only sees the domain name. Now 
User 2 can advertise the Web site with an easy-to-remember URL. 


FIGURE 3-5 


Domain name hides the 
actual path 


TIP 


If you want to see if a 
domain name is 
available, or to regis- 
ter your own domain 
name, visit Network 
Solutions at www. 
networksolutions. 
com. Network 
Solutions is the com- 
pany responsible for 
registering .com, 
-net, and .org domain 
names, and works in 
cooperation with the 
U.S. government. 
Over five million busi- 
ness and personal 
domain names are 
currently registered. 
The site contains a 
simple form that lets 
you enter the domain 
you want to see if it 
is already registered. 
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Web server 


public area 


www.webserver.com 


User1 www.webserver.com/user1/ 


en webserver. com/user2/ > 
www.webserver.com/user3/ 


RELATIVE VERSUS ABSOLUTE PATHS 

You most likely will build your Web site on a computer that is different from the 
computer that will be hosting your site. Keep this in mind when you are design- 
ing the directory and file structure. Because your files will be transferred to 
another computer, any URLs you specify to link to other pages in your site must 
include paths that are transferable. This is why you should never specify an 
absolute path in your partial URLs. An absolute path points to the computer’s 
root directory.The root directory is indicated by a leading slash in the file path: 


/graphics/logo.gif 


If you include the root directory in your partial URLs, you are basing your 
file structure on your development machine. If the files are moved to another 
machine, the same path to your files will not apply, and your site will include 
links that do not work because the browser cannot find the files. 

Relative paths tell the browser where a file is located relative to the docu- 
ment the browser currently is viewing. Because the paths are not based on the 
root directory, they are transferable to other computers. 


BUILDING A RELATIVE FILE STRUCTURE 

Take a closer look at the relative file structure for User 2’s Web site as depicted 
in Figure 3-6. Notice that User 2’s Web folder contains three HTML files and two 
subfolders. The two subfolders, graphics and pictures, contain the graphics and 
pictures for the Web site. 
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FIGURE 3-6 
Relative file structure 


User 2's 


Web folder 


htm <IMG SRC="graphics/logo.gif”"> 


- BE 


E 


To include the file logo.gif in index.htm, User 2 adds the following code to 
index.htm: 


<IMG SRC="graphics/logo.gif”>. 


The path in the SRC value tells the browser to look down one level in the 
directory structure for the graphics folder and find the file logo.gif.The path to 
the file is relative to the file the browser is viewing. This type of relative file 
structure can be moved to different machines—the relationship between the 
files will not change, because everything is relative within the Web folder. 

Of course, the easiest way to ensure that all your path names are correct is 
to keep all of your HTML and image files in the same directory. Because all files 
are kept together, the only information you need to put in the SRC or HREF 
attribute is the filename itself. In Figure 3-7, User 2 has simplified the directory 
structure. To reference the file logo.gif, User 2 adds the following code in one of 
the HTML files: 


<IMG SRC="logo.gif">. 


FIGURE 3-7 


Simplified single folder 
file structure 
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User 2's 


Web folder 


| 


— index.htm 


„htm 


| 
Jig 


a him <IMG SRC="logo.gif"> 


©. 


r | pag 


Jl 


(ae | 
= 


m | logo. 


JL 


c | pict 


= 


re.jpg 


DIAGRAM THE SITE 


| 


Plan your site by creating a flowchart that shows the structure and logic behind 
the content presentation and navigation choices you offer.You can sketch your 
site with paper and pencil or create it using flowcharting software. Sometimes 
it is helpful to use sticky notes or cards to plan the structure visually. This 
method lets you easily move pages from one section or level to another. 
Whichever method you choose, this preliminary planning step is one of the 
most important that you take in planning your site. You can move pages and 
whole sections of content freely, plan navigation paths, and visualize the entire 
site.This is the time to experiment. Once you have started coding the site it will 
be much more difficult and time consuming to go back and make major 
changes. Remember to create and stick to the filenaming conventions for each 
of your pages as well. 


CREATE THE INFORMATION STRUCTURE 

Think about the information needs of your users and how they can best access 
the content of your site. Consider what your information design map should 
look like. Look through the sample structures provided in this section and 
judge how well they fit the needs of your information. Your design may incor- 
porate several different structures, or you may have to adapt the structures to 
your content. Each sample structure is a representation. You may have more or 
fewer pages, sections, topics, and links. You may choose to use bidirectional 
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FIGURE 3-8 


Linear information 
structure 


links where only single-direction links are indicated. Use these examples as 
starting points and design from there. 


Linear Structure 

The linear information structure, illustrated in Figure 3-8, lets you guide the user 
along a path. This structure lends itself to book-type presentations, or content 
that requires the user to follow a predefined path. Once into the content, users 
can navigate backwards or forwards within the content path. Each page can 
contain a link back to the main page if desired. Pages may contain links to a 
related subtopic. If the users jump to the subtopic page, they only can return 
to the page that contains the subtopic link. This structured navigation returns 
them to the same point in the content path. 


OOOO 


Subtopic 


Tutorial Structure 
The tutorial structure illustrated in Figure 3-9 is perfect for computer-based 
training content such as lessons, tutorials, or task-oriented procedures. 

The tutorial structure builds on the simple linear structure in Figure 3-8. 
The user navigates in a linear manner, progressing through the concept, lesson, 
and review pages in order. Because the lesson exists in hypertext, users can 
leave the lesson structure and return at any time. They also can choose the 
order of lessons, and start at any main concept point they wish. Notice that the 
table of contents, index, and site map pages are linked to and from all pages in 
the course. Within each lesson users can navigate as necessary to familiarize 
themselves with the content before they review.This structure can be adapted 
to fit the content needs. For example, the group of pages in the illustration 
could be one section of a larger training course. 


Web Structure 

Many smaller Web sites follow the content structure illustrated in Figure 3-10, 
which offers links to and from every page in the site. This allows the user to 
jump freely to any page from any other page. If you build a Web type of content 
structure, make sure to include on each page clear location information and a 
standardized navigation bar that not only tells the user where they are, but 
where they can go. 
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FIGURE 3-9 | 
Tutorial structure i 
Main page 
Y 
l 
Site Table of Table of Contents, Index, 
Map |< Contents +> Index and Site Map link to and 
| from all pages 
ma Concept a 
Y y 
Lesson Lesson | Lesson | 
Lesson | Lesson | Lesson | 
t t 
Review Review | Review | 
FIGURE 3-10 < gd 
Web structure | | 
Main 
<<—_—_ 
page | 


j 
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FIGURE 3-11 
Hierarchical structure 


Hierarchical Structure 

The hierarchical structure illustrated in Figure 3-11 is probably the most com- 
mon information design. It lends itself to larger content collections because the 
section pages break up and organize the content at different levels throughout 
the site. Navigation primarily is linear within the content sections. Users can 
scan the content on the section page and then choose the content page of their 
choice. When they finish reading the content, they can return to the section 
page.The site map allows users to navigate freely throughout the site. Include 
a navigation bar on each page that lets the user jump to any section page, the 
main page, and the site map. 
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Cluster Structure 

The cluster structure illustrated in Figure 3-12 is similar to the hierarchical 
structure, except that every topic area is an island of information unto itself, 
with all pages in each cluster linked to each other. This structure encourages 
exploration within a topic area, allowing the user to navigate freely through the 
content.All pages contain a navigation bar with links to the section pages, main 
page, and site map. 
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Catalog Structure 

The catalog structure illustrated in Figure 3-13 accommodates electronic shopping.The 
user can browse or search for items and view specific information about each product 
on the item pages. Users can add items to their shopping cart as they shop. When they 
are finished, they can review the items in their shopping cart, and then proceed to 
checkout, where they can enter credit card information and finalize the order. 


FIGURE 3-12 
Cluster structure 


FIGURE 3-13 
Catalog structure 
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This type of Web site requires sophisticated back-end transaction process- 
ing to handle the shopping cart tally, process credit card information, and gen- 
erate an order for the warehouse. Businesses that want to set up an electronic 
commerce site can purchase ready-made commerce software packages or 
develop their own from scratch. 
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SUMMARY & REVIEW 


A successful Web site is the result of successful planning. The steps you take before you 
actually start coding the site will save you time, energy, and expenses in the long run. 
Remember these points of successful planning: 


Start with pencil and paper. Your ideas will be less restricted and you easily can revise 
and recast without recoding. 

Write a site specification document. You will find it invaluable as a reference while 
building your site. 

Identify the content goal by adopting your user's perspective and learning what they 
expect from your site. 

Analyze your audience and create an audience profile. Focus your site on the user's 
needs, and continue to meet those needs by adapting the site based on user feedback. 
An effective site is more commonly the result of a team effort. Leverage different skill 
sets and experience to build a Web site development team. 

Plan for successful implementation of your site by creating portable file naming con- 
ventions. Build a relative file structure that can be transferred to your Web server 
without a hitch. 

Select a basic information structure for your site and then manually diagram it, cus- 
tomizing as you develop the best structure for your site. 


REVIEW QUESTIONS 
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List three technology constraints that can affect the way a user views your Web site 
content. 
Consult with your Web server administrator when you need to determine the 

and for your site. 
Name two inconsistencies that can cause broken links when you upload your files to a 
Web server. 
List three characteristics of filenames that vary by operating system. 
The international standard for filenames often is called 
Which computer operating system is case-sensitive? 
Rename the following files so that they are compatible across all operating systems: 
My file.htm 
case:1.htm 
#3rdpage.htm 
What is the default main page name for a Web site? 
What are the two types of URLs? 
What are the four parts of a complete URL? 
What type of URL links to another server? 
What type of URL links within a server? 
What affects the format of the URL for your Web site? 
What is the benefit of purchasing a domain name? 
What symbol indicates an absolute path? 
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Why should you never specify an absolute path in partial URLs? 

What is the benefit of building a site with relative paths? 

Files that reside in the same directory need only the to refer to 
each other. 

List two benefits of diagramming your site before you start coding. 


PROJECTS 


1, 


Browse the Web and find a site you like. Write a mission statement for the Web site 

that briefly states the site's goals. 

Browse the Web and find Web sites that fit the following content types: 

a. Billboard 

b. Publishing 

c. Special interest 

d. Product support 

Write a short summary of how the content is presented at each Web site and describe 

how the site focuses on its users needs. 

Browse the Web and find a site that does not contain a user survey form. Write a 

10-15 question user survey that you would use on the site. Tailor the questions to the 

site's content and goals. 

Find a billboard type of Web site. Write an analysis of the site that includes functions 

and features you would add to extend the site's effectiveness for its users. 

Visit www. winzip.com and download the latest version of WinZip. If you have a Mac, 

visit www.aladdinsys.com and download the shareware version of Stuffit. 

a. Read the product documentation and install the program on your computer. 

b. Find a document that you have created in your word processing software. Note the 
file size. 

c. Compress the file. Note the new file size. 

Browse the Web to find examples of the following site structures and describe how 

the content fits the structure: 

a. Linear 

b. Hierarchical 

Browse the Web to find a site that uses more than one structure type and describe 

why you think the site’s content benefits from multiple structures. 

Are there other structure types that are not described in this chapter? Find a site that 

illustrates a different structure content. Flowchart the site and determine why it bene- 

fits from the different structure type. 


CASE STUDY 


Write a site specification for the site you defined in Chapters 1 and 2. Include as much infor- 
mation as possible from the project proposal you completed at the end of Chapter 1. Make 
sure to include a mission statement that defines the goals for the site. Determine how you 
will measure the site's success in meeting its goals. Include a description of the intended 
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audience. Describe how you will assess user satisfaction with the site. Include technological 
issues that may influence the site's development or function. 

Prepare a detailed flowchart for your site using the preliminary flowchart you created at 
the end of Chapter 2. Create a filename for each page that matches the ISO 9660 standard. 
Indicate all links between pages. Write a short summary that describes the flowchart. 
Describe why you chose the particular structure, how it suits your content, and how it bene- 
fits the user. 


